<template>

  <el-dialog title="预览" :visible="PreviewDialog" width="40%" @close="handleClose">
    <h3>{{row.title}}</h3>
    <div>
      <span class="show">{{getTime(row.createTime)}}</span>
      <span class="show">{{row.username}}</span>
      <span class="show">
        <i class="el-icon-view" style="margin-right: 5px" />
        {{row.visits}}</span>
      <quillEditor disabled v-model="row.articleBody"></quillEditor>
      <!-- <p v-html="row.articleBody"></p> -->
    </div>
  </el-dialog>
</template>

<script>
// 引入富文本编辑器
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { getTimes } from '@/utils'
export default {
  components: { quillEditor },
  props: {
    PreviewDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      row: {}
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:PreviewDialog', false)
    },
    getTime(time) {
      // const date = new Date(time)
      // const Y = date.getFullYear()
      // const M = (date.getMonth() + 1 + '').padStart(2, '0')
      // const D = (date.getDate() + '').padStart(2, '0')
      // const h = (date.getHours() + '').padStart(2, '0')
      // const m = (date.getMinutes() + '').padStart(2, '0')
      // const s = (date.getSeconds() + '').padStart(2, '0')
      // return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
      return getTimes(time)
    }
  }
}

</script>

<style scoped lang='scss'>
.show {
  margin-right: 10px;
}
.content {
  background-color: #f5f5f5;
}
::v-deep .ql-container {
  border: transparent;
}
::v-deep .ql-toolbar {
  display: none;
}
::v-deep .ql-editor {
  border: transparent;
  border-top: 1px dashed #ccc;
  background-color: #f5f5f5;
  p {
    margin: 10px 0;
  }
}
</style>
